<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>天河教育管理系统</title>
    <link rel="stylesheet" type="text/css" href="/static/js/jquery-easyui/themes/bootstrap/easyui.css">
    <!-- EasyUI样式类 -->
    <link rel="stylesheet" type="text/css" href="/static/js/jquery-easyui/themes/icon.css">
    <!-- EasyUI图标样式类 -->
    <script type="text/javascript" src="/static/js/jquery-easyui/jquery.min.js"></script>
    <!-- jQuery核心包 -->
    <script type="text/javascript" src="/static/js/jquery-easyui/jquery.easyui.min.js"></script>
    <!-- EasyUI的核心包 -->

    <script src="/bootstrap/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="/bootstrap/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="/bootstrap/js/plugins/validate/messages_zh.min.js"></script>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/bootstrap/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="/bootstrap/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="/bootstrap/css/animate.min.css" type="text/css" rel="stylesheet">
    <link href="/bootstrap/css/login.min.css" type="text/css" rel="stylesheet">
    <link href="/bootstrap/css/style.min.css?v=4.0.0" rel="stylesheet">

    <base target="_blank">
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script>

        //用户名检测
        $(function () {
            $("#uname").blur(function () {
                //发送ajax请求
                $.ajax({
                    type: "post",
                    url: "/retrieve/checkName",
                    data: {
                        username: $("#uname").val()
                    },
                    dataType: "text",
                    success: function (data) {
                        if (data.success) {
                            $("#spName").text('请输入邮箱')
                        } else {
                            $("#spName").html(data.msg)
                        }
                    },
                });
            })

            //发送邮箱望后台 点击按钮
            $("#getCode").click(function () {
                $.ajax({
                    url: "/retrieve/checkEmail",
                    data: {
                        email: $("#emailC").val()
                    },
                })
            });
            //校对验证码  失去焦点事件
            $("#codeC").blur(function () {
                //发送ajax请求
                $.ajax({
                    type: "post",
                    url: "/retrieve/checkCode",
                    data: {
                        code: $("#codeC").val()
                    },
                    dataType: "text",
                    success: function (data) {
                        if (data.success) {
                            $("#spName").text("验证码正确")
                        } else {
                            $("#spName").html(data.msg)
                        }
                    },
                });
            })
            //保存新密码
            $("#save").click(function () {
                //发送ajax请求执行
                $.post("/retrieve/save", {
                    newpassword: $("#newpassword").val(),
                    username: $("#uname").val(),
                }, function (data) {

                    if (data.success) {
                        $.messager.alert("提示", "修改成功", function () {
                           window.location.href="/login"
                        });
                    } else {
                        $.messager.alert("提示", data.msg, "error");
                    }
                });
            })

        })
    </script>

    <%--倒计时--%>
    <script type="text/javascript">
        var countdown=60;
        function sendemail(){
            var obj = $("#getCode");
            settime(obj);

        }
        function settime(obj) { //发送验证码倒计时
            if (countdown == 0) {
                obj.attr('disabled',false);
                //obj.removeattr("disabled");
                obj.val("免费获取验证码");
                countdown = 60;
                return;
            } else {
                obj.attr('disabled',true);
                obj.val("重新发送(" + countdown + ")");
                countdown--;
            }
            setTimeout(function() {
                    settime(obj) }
                ,1000)
        }
    </script>

    <%--表单校验--%>

    <script>
        $(function() {
            $("#password").validate({
                rules : {
                    "uname" : {
                        rangelength : [ 2, 16 ]
                    },

                    "emailC" : {
                        required : true,
                        email : true
                    },
                    "newpassword" : {
                        required : true,
                        minlength : 1
                    },
                },
                messages : {
                    "uname" : {
                        required: "账户名必须是2到16位",
                        required : "密码必填",
                    },
                    "emailC" : {
                        required : "电子邮箱必填",
                        email : "电子邮箱格式不正确"
                    },
                    "newpassword" : {
                        required: "密码必填",
                        minlength: "密码不能少于1位"
                    },
                }
            });
        });
    </script>

</head>
<body class="signin">
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-5" style="margin-left: 215px;margin-top: 10px">
            <form method="post" id="password">
                <h4 class="no-margins">找回密码：</h4>
                <p class="m-t-md">天河教育CRM管理系统</p>
                <p>
                    <input id="uname" name="username" type="text" style="margin-bottom: 20px" class="form-control uname"
                           placeholder="账号" autocomplete="off"/>
                </p>
                <span id="spName"></span>
                <p>
                    <input type="text" style="margin-bottom: 20px" class="form-control pword m-b" name="email"
                           id="emailC"
                           placeholder="请输入邮箱获取验证码" autocomplete="off">
                </p>
                <p>
                    <input type="text" style="margin-bottom: 20px; width: 120px; float: left"
                           class="form-control pword m-b" name="code"
                           id="codeC"
                           placeholder="验证码" autocomplete="off">
                    <input style="margin-bottom: 30px;float: right;width: 100px"
                           type="button" class="btn btn-success btn-block "
                           id="getCode"
                           value="获取验证码"  onclick="sendemail()"  >
                <p>
                    <input type="password" style="margin-bottom: 20px" class="form-control uname" name="newpassword"
                           id="newpassword"
                           placeholder="请输入新密码" autocomplete="off">
            </p>

                <input style="margin-bottom: 20px" type="button" class="btn btn-success btn-block " id="save"
                       value="提&emsp;交">
                <a  href="/login" style="float: left">返回登录</a>
            </form>
        </div>
    </div>
</div>
<div class="signup-footer">
    <div class="pull-left" style="">
        &copy; 2018 天河教育
    </div>
</div>
</body>

</html>